<h3>描述</h3>
<p>
  要开启列拖动功能时，需要在ti-table标签上使用tiColsResizable指令，并且需要给table一个带有
  ti3-resize-wrapper样式类的父容器。如果要禁止某一列的拖动，则可以给当前列表头的th标签上添加 not-resizable 属性
</p>
<p class="demo-text-warn">注意：使用 tiOverflow 组件，请导入 TiOverflowModule。</p>
<h3>示例</h3>

<ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns" tiColsResizable
  ><!-- 使用列拖动功能时，需要在ti-table标签上使用tiColsResizable指令。 -->
  <!-- 使用列拖动功能时，需要给table一个带有ti3-resize-wrapper样式类的父容器，其父节点是ti-table, 子节点是table。 -->
  <div class="ti3-resize-wrapper">
    <table>
      <thead>
        <tr>
          <th tiOverflow width="{{columns[0].width}}">{{columns[0].title}}</th>
          <!-- 如果要禁止拖动当前列，则给当前列表头的 th 标签上添加 not-resizable 属性 -->
          <th tiOverflow not-resizable width="{{columns[1].width}}">{{columns[1].title}}</th>
          <th tiOverflow width="{{columns[2].width}}">{{columns[2].title}}</th>
          <th tiOverflow width="{{columns[3].width}}">{{columns[3].title}}</th>
          <th tiOverflow width="{{columns[4].width}}">{{columns[4].title}}</th>
        </tr>
      </thead>
      <tbody>
        <!--注意:ngFor中的displayed数据与displayedData传入的数据一致, 初始化设置为[]即可-->
        <tr *ngFor="let row of displayed">
          <td tiOverflow>{{row.firstName}}</td>
          <td tiOverflow>{{row.lastName}}</td>
          <td tiOverflow>{{row.age}}</td>
          <td tiOverflow>{{row.balance}}</td>
          <td tiOverflow>{{row.email}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</ti-table>
